<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>心愿单</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <br />

    <span>
      搜索：
      <el-input style="width:15rem" placeholder="商品名称" @input="search" v-model="search_name"></el-input>
    </span>
    <el-select
      style="width:15rem"
      placeholder="商品类别"
      @change="search"
      v-model="type"
      autocomplete="off"
      clearable
    >
      <el-option
        v-for="item in type_options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search"></el-button>
    <el-divider></el-divider>
    <el-table
      :data="goods"
      style="width: 100%"
      class="check"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="src" label="商品">
        <template slot-scope="scope">
          <img :src="scope.row.src" width="100" @click="detail(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名"></el-table-column>
      <el-table-column prop="key_words" label="商品类型"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-receiving" size="mini" @click="detail(scope.row)">详细</el-button>
          <el-button type="primary" icon="el-icon-delete" size="mini" @click="star(scope.row)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-button size="medium" type="primary" icon="el-icon-delete" @click="removeMore">全部移除</el-button>
    <el-drawer title="drawer" :visible.sync="drawer" size="50%" :with-header="false">
      <div class="goods-div">
        <h2>{{chooseItem.name}}</h2>
        <div class="icon" @click="star(chooseItem)">
          <i :class="chooseItem.star == 1 ? 'el-icon-star-on' :'el-icon-star-off'"></i>
        </div>
        <div class="base-info">
          <img :src="chooseItem.src" class="img" />
          <div style="width:25rem">
            <p>{{chooseItem.name}}</p>
            <el-link :underline="false" type="primary">{{chooseItem.price}} ¥</el-link>
            <p>品牌: {{chooseItem.brand}}</p>
            <p>库存: {{chooseItem.stock}}</p>
            <el-popover placement="bottom" v-model="dialogVisible">
              <div class="check">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                >Amazon</el-checkbox>

                <el-checkbox-group v-model="checkedAStores" @change="handleCheckedAStoresChange">
                  <el-checkbox
                    class="store"
                    v-for="item in Astores"
                    :label="item"
                    :key="item"
                  >{{item}}</el-checkbox>
                </el-checkbox-group>

                <el-checkbox
                  class="title"
                  :indeterminate="EisIndeterminate"
                  v-model="EcheckAll"
                  @change="EhandleCheckAllChange"
                >Ebay</el-checkbox>

                <el-checkbox-group v-model="checkedEStores" @change="handleCheckedEStoresChange">
                  <el-checkbox
                    class="store"
                    v-for="item in Estores"
                    :label="item"
                    :key="item"
                  >{{item}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="minibtn">
                <el-button size="mini" @click="dialogVisible = false">取消</el-button>
                <el-button size="mini" type="primary" plain @click="pushShip">提交</el-button>
              </div>
              <el-button type="primary" slot="reference">立即直发</el-button>
            </el-popover>
            <el-button
              type="primary"
              @click="star(chooseItem)"
            >{{chooseItem.star === 1 ? '移出心愿单' : '添加到心愿单'}}</el-button>
          </div>
        </div>
        <br />
        <el-tabs v-model="activeName" class="tab">
          <el-tab-pane label="Amazon 商品描述" name="first">
            <article v-html="compileMarkDown(chooseItem.amazondescription)" ></article>
          </el-tab-pane>
          <el-tab-pane label="ebay 商品描述" name="second">
            <article v-html="compileMarkDown(chooseItem.ebaydescription)" ></article>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import showdown from 'showdown'
var converter = new showdown.Converter();
export default {
  data() {
    return {
      tableData: [],
      checkAll: false,
      EcheckAll: false,
      checkedAStores: [],
      checkedEStores: [],
      Astores: [],
      Estores: [],
      isIndeterminate: true,
      EisIndeterminate: true,
      //
      dialogVisible: false,
      activeName: "first",
      chooseItem: {},
      drawer: false,
      type_options: [
        { value: "Phone", label: "手机" },
        { value: "Computer", label: "电脑" },
        { value: "Instrument", label: "仪器" },
        { value: "Appliances", label: "器具" }
      ],
      search_name: "",
      type: "",
      goods: [],
      table: [],
      multipleSelection: []
    };
  },
  mounted: function() {
     this.$post("/str/getStoreByUserID", {
        user_id: sessionStorage.getItem("user_id")
      }).then(res => {
        if (res.code === 504) {
          this.$message.warning(res.message);
          return;
        }
        if (res.code === 200) {
          this.Astores = res.data.filter(e => e.plataeform_type === 1).map(e => e.store_name);
          this.Estores = res.data.filter(e => e.plataeform_type === 2).map(e => e.store_name);
        }
      });
    this.loadData();
  },
  methods: {
    compileMarkDown(value) {
      return converter.makeHtml(value)
    },
    loadData() {
      this.$post("/wit/getWishlist", {
        user_id: sessionStorage.getItem("user_id")
      }).then(res => {
        let temp = [];
        for (var i = 0; i < res.data.number; i++) {
          temp.push({
            name: res.data.product[i].title,
            src: res.data.product[i].remark,
            price: res.data.product[i].retail_price,
            key_words: res.data.product[i].key_words,
            brand: res.data.brand[i].name_en,
            stock: res.data.product[i].replenishment_period,
            amazondescription: res.data.packageinfo[i].amazon_description,
            ebaydescription: res.data.packageinfo[i].ebay_description,
            witid: res.data.wishlist[i].wit_id,
            star: 1,
            proid: res.data.product[i].pro_id
          });
        }
        this.goods = temp;
        this.table = temp;
      });
    },

    EhandleCheckAllChange(val) {
      this.checkedEStores = val ? this.Estores : [];
      this.EisIndeterminate = false;
    },

    handleCheckAllChange(val) {
      this.checkedAStores = val ? this.Astores : [];
      this.isIndeterminate = false;
    },

    handleCheckedEStoresChange(value) {
      let checkedCount = value.length;
      this.EcheckAll = checkedCount === this.Estores.length;
      this.EisIndeterminate =
        checkedCount > 0 && checkedCount < this.Estores.length;
    },

    handleCheckedAStoresChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.Astores.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.Astores.length;
    },
    pushShip() {
      this.dialogVisible = false;
      this.$notify.success("成功！");
    },

    star(item) {
      if (item.star == 1) {
        this.$post("/wit/deletedWishlist", {
          wit_id: item.witid
        }).then(res => {
          item.star = 2;
          this.loadData();
        });
        return;
      } else {
        this.$post("/wit/addWishlist", {
          user_id: sessionStorage.getItem("user_id"),
          pro_id: item.proid
        }).then(res => {
          item.star = 1;
          this.loadData();
        });
      }
    },

    detail(item) {
      this.chooseItem = item;
      this.drawer = true;
    },
    removeMore() {
      if (this.multipleSelection == 0) {
        this.$message.warning("请选择商品");
        return;
      }
      this.multipleSelection.forEach(element => {
        this.star(element);
      });
      this.$message.success("移除成功！");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    search() {
      this.goods = this.table.filter(
        e => e.name.match(this.search_name) && e.key_words.match(this.type)
      );
    }
  }
};
</script>

<style scoped>
.minibtn {
  margin-top: 1rem;
}
.check >>> .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #1598ec;
  border-color: #1598ec;
}
.check >>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #1598ec;
  border-color: #1598ec;
}
.check >>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1598ec;
}
.title {
  margin-top: 0.5rem;
}
.store {
  display: block;
  margin-left: 1rem;
  margin-top: 0.5rem;
}
.tab {
  width: 50rem;
}
.tab >>> .el-tabs__item.is-active {
  color: #1598ec;
}
.tab >>> .el-tabs__active-bar {
  background-color: #1598ec;
}
.base-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.goods-div {
  margin-left: 3rem;
  height: 60rem;
}
.small-icon {
  font-size: 20px;
  color: #f3c93f;
}
.icon {
  position: absolute;
  top: 1rem;
  left: 11rem;
  font-size: 30px;
  color: #f3c93f;
}
.goods-row {
  width: 94%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.goods-info-div {
  margin-left: 1rem;
  width: 50%;
}
.small-img {
  width: 15rem;
  height: 15rem;
}
.img {
  width: 20rem;
  height: 20rem;
}
.goods-card {
  margin-top: 0.8rem;
  width: 42rem;
  height: 15rem;
}
.goods-small-div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
